<template>
  <q-dialog persistent fixed v-model="isPreviewDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
      <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
          <q-header class="bg-grey-10 shadow-7">

              <q-toolbar>
                  <q-toolbar-title>文件详情</q-toolbar-title>
                  <q-space />

                  <q-btn dense flat icon="close" @click="trigerUpdate('close')">
                  </q-btn>
              </q-toolbar>

          </q-header>
          <q-page-container>
              <q-page  class="bg-dark row hide-scrollbar">

                  <q-card flat style="width: 100%" class="back-dark column">
                    <q-responsive :ratio="16 / 9" style="width: 100%">
                      <div id="videocontainer" ref="videocontainer" style="width: 100%; height: 100%"></div>
                  </q-responsive>
                  <q-card-section>
                    <q-list padding class="rounded-borders">
                      <q-item-label header class="text-teal-6">基本信息</q-item-label>
                      <q-item v-ripple dense>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  文件名
                              </div>
                          </q-item-section>
                          <q-item-section>
                                {{ videoinfo.filename }}
                          </q-item-section>
                      </q-item>



                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  创建时间
                              </div>
                          </q-item-section>
                          <q-item-section>
                                {{ videoinfo.ctime }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  文件大小
                              </div>
                          </q-item-section>
                          <q-item-section>
                              {{ videoinfo.format.size }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                        <q-item-section side class="text-grey-6">
                            <div class="row" style="min-width: 80px; max-width: 100px">
                                文件时长
                            </div>
                        </q-item-section>
                        <q-item-section>
                            {{ videoinfo.format.duration }}
                        </q-item-section>
                    </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  分辨率
                              </div>
                          </q-item-section>
                          <q-item-section>
                              {{ videoinfo.format.resolution }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  帧率
                              </div>
                          </q-item-section>
                          <q-item-section>
                              {{ videoinfo.streams[0].avg_frame_rate.split("/")[0] }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  码率
                              </div>
                          </q-item-section>
                          <q-item-section>
                              {{ videoinfo.format.bit_rate }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  格式
                              </div>
                          </q-item-section>
                          <q-item-section>
                            {{ videoinfo.format.format_long_name
                            }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                          <q-item-section side class="text-grey-6">
                              <div class="row" style="min-width: 80px; max-width: 100px">
                                  视频编码
                              </div>
                          </q-item-section>
                          <q-item-section>
                              {{ videoinfo.streams[0].codec_long_name }}
                          </q-item-section>
                      </q-item>
                      <q-item v-ripple>
                        <q-item-section side class="text-grey-6">
                            <div class="row" style="min-width: 80px; max-width: 100px">
                                采样空间
                            </div>
                        </q-item-section>
                        <q-item-section>
                            {{ videoinfo.streams[0].pix_fmt }}
                        </q-item-section>
                    </q-item>

                  </q-list>
                  </q-card-section>

                  </q-card>


              </q-page>
          </q-page-container>

      </q-layout>

  </q-dialog>
  </template>

<script>
import Player from 'xgplayer';
import{getVideoInfo} from'assets/api/studio/nas'
import {getSeconds} from'assets/utils/stodate'
import moment from 'moment';
export default {
    name: 'VideoDialog',

    props: {
        isVideoDialog: {
            default: false
        },
        url: {
            type: String
        }
    },
    data() {
        return {
          videoinfo: {
            ctime:'',
            filename:'',
                format: {
                    size: '',
                    bitRate: "",
                    filename: "",
                    duration:'',
                    resolution:'',
                    format_long_name:''
                },
                streams: [{
                        avg_frame_rate: "",
                        codec_name: "",
                        pix_fmt:''
                    },
                    {
                        codec_name: "",
                    },
                ],
            },
        }
    },
    watch: {
        isVideoDialog: function (val) {

            if (val) {
                setTimeout(()=>{
                  this.loadPlayer()
                },200)
            }
        }
    },
    beforeDestroy(){

    },
    methods: {

        loadVideoInfo(){
            getVideoInfo({
              url:this.url
            }).then(res=>{
              console.log(res);
              if(res.data.code==1){
                let data = res.data.data;
                console.log(data);
                data.format.size = (data.format.size/1024/1024).toFixed(2) +'MB'
                data.format.bit_rate = (data.format.bit_rate/1024/1024).toFixed(2) +'MB/s'
                data.format.duration= getSeconds(data.format.duration)
                data.ctime = moment(data.format.tags.creation_time).format('YYYY/MM/DD HH:mm')
                data.format.resolution= data.streams[0].width +'x'+data.streams[0].height;
                let fileList = data.format.filename.split('\\')
                data.filename = fileList[fileList.length-1]
                this.videoinfo= data;
              }
            })
        },

        trigerUpdate(type) {
            this.$emit('update', type)
        },
        loadPlayer() {
            let videoUrl = this.GLOBAL.serveurl+this.url;

            var vm = this;
            this.player = new Player({
                id: "videocontainer",
                url: videoUrl,
                lang: 'zh-cn',
                fluid: true,
                playbackRate: [0.5, 0.75, 1, 1.5, 2],
                defaultPlaybackRate: 1,
                keyShortcut: "on",
                controls: true,
                "x5-video-player-type": "h5",
                playsinline: false,
                videoInit: true,
                screenShot: {
    saveImg: true,
    quality: 0.92,
    type: 'image/png',
    format: '.png'
  }
            });
            var vm = this;
            this.player.on("ready", () => {
                vm.loadVideoInfo()
            });
            this.player.on("play", function () {

            });
            this.player.on("timeupdate", function () {

            });
            this.player.on("pause", function () {

            });
            this.player.on("complete", function () {

            });
        },


    }
}
</script>
